import React from 'react'
import ReactDOM from 'react-dom'

// 类组件中的 state （状态）
class Counter extends React.Component {
  // 方式二：简化语法（ 推荐 ）
  // 这是 ES6 中实例属性的简化语法
  state = {
    count: 0,
    a: 'a'
  }

  // 方式一： 利用构造函数初始化state
  /* constructor() {
    super()

    // this 即： 当前组件的实例对象
    // console.log('constructor:', this)
    // 初始化state
    // 组件中的状态必须使用 state 属性名
    this.state = {
      count: 0,

      a: 'a'
    }
  } */

  render () {
    // console.log('render:', this)
    return (
      <div>
        <h1>计数器：{this.state.count} - {this.state.a}</h1>
        <button>+1</button>
      </div>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'))
